大家好，又见面了，我是你们的朋友全栈君。
1、用js的formData对象上传（服务器返回url地址）代码语言：javascript复制代码语言：javascript复制methods: { update(e){let file = e.target.files[0];let param = new FormData(); //创建form对象param.append('file',file);//通过append向form对象添加数据console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去let config = { headers:{'Content-Type':'multipart/form-data'} //这里是重点，需要和后台沟通好请求头，Content-Type不一定是这个值}; //添加请求头axios.post('http://127.0.0.1:8081/upload',param,config) .then(response=>{console.log(response.data); }) }}
2、Form表单上传（服务器返回url地址）
代码语言：javascript复制提交代码语言：javascript复制data: { name: '', age: '', file: ''},methods: { getFile(event) {this.file = event.target.files[0];console.log(this.file); }, submitForm(event) {event.preventDefault();let formData = new FormData();formData.append('name', this.name);formData.append('age', this.age);formData.append('file', this.file); let config = { headers: {'Content-Type': 'multipart/form-data' }} axios.post('http://127.0.0.1:8081/upload', formData, config).then(function (response) { if (response.status === 200) {console.log(response.data); }}) }}注意：表单form加上属性enctype=”multipart/form-data”。客服端发送的头部就是：
代码语言：javascript复制Content-type: multipart/form-data, boundary=AaB03x--AaB03x//后面这个是浏览器假的随机值提交成功客服端还能看到以下图片相关内容：
3、获取相机图片的base64代码语言：javascript复制/** * 获取用户拍照的图片信息 */async Photograph() { // 获取用户拍照的图片名字，显示到页面上 this.fileName = this.$refs.photoref.files[0].name; // 获取图片base64 代码，并存放到 base64ImgData 中 this.base64ImgData = await this.FileReader(this.$refs.photoref.files[0]);},/** * 返回用户拍照图片的base64 */FileReader(FileInfo) { // FileReader 方法参考地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader let reader = new FileReader(); // readAsDataURL 方法参考地址：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL reader.readAsDataURL(FileInfo); // 监听读取操作结束 /* eslint-disable */ return new Promise(resolve => (reader.onloadend = () => resolve(reader.result)) );}发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/151185.html原文